<%--
  Created by IntelliJ IDEA.
  User: 86158
  Date: 2022/10/25
  Time: 11:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <title>注册</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>

    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }

        #div1 {
            text-align: center;
            width: 800px;
            height: 400px;
            background-color: white;
        }

        #title {
            padding-bottom: 15px;
            color: #1e9fff;

        }

    </style>
</head>
<body style="align-items: center;">
<div id="div1" class="layui-main">
    <h1 id="title">添加员工</h1>
    <hr>
    <br>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-col-lg6">
                <label class="layui-form-label">员工名称</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="name"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-lg6">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <select name="sex" id="sex">
                        <option value=""></option>
                        <option value="0">女</option>
                        <option value="1">男</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-lg6">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <select name="deptId" id="deptId">
                        <option value=""></option>
                        <c:forEach var="dept" items="${depts}">
                            <option value="${dept.id}">
                                    ${dept.name}
                            </option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="layui-col-lg6">
                <label class="layui-form-label">职位</label>
                <div class="layui-input-block">
                    <select name="jobId" id="jobId">
                        <option value=""></option>
                        <c:forEach var="job" items="${jobs}">
                            <option value="${job.id}">
                                    ${job.name}
                            </option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-lg6">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="phone"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-lg6">
                <label class="layui-form-label">电话号码</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="tel"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-lg6">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="email"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-lg6">
                <label class="layui-form-label">QQ</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="qq"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-lg6">
                <label class="layui-form-label">学历</label>
                <div class="layui-input-block">
<%--                    <input type="text"--%>
<%--                           name="education"--%>
<%--                           autocomplete="off"--%>
<%--                           class="layui-input">--%>
                    <select name="education" id="education">
                        <option value="">--------请选择--------</option>
                        <option>高中</option>
                        <option>专科</option>
                        <option>本科</option>
                        <option>硕士</option>
                        <option>博士</option>
                        <option>其他</option>
                    </select>
                </div>
            </div>
            <div class="layui-col-lg6">
                <label class="layui-form-label">专业</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="speciality"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-lg6">
                <label class="layui-form-label">身份证号码</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="cardId"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-lg6">
                <label class="layui-form-label">政治面貌</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="party"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-lg6">
                <label class="layui-form-label">民族</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="race"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-lg6">
                <label class="layui-form-label">联系地址</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="address"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-lg6">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-block">
                    <input type="text"
                           id="birthday"
                           name="birthday"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-lg6">
                <label class="layui-form-label">爱好</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="hobby"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-lg6">
                <label class="layui-form-label">邮政编码</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="postCode"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-lg6">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="remark"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="Add-filter">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
            </div>
        </div>
    </form>

</div>

</body>
<script>
    //Demo
    layui.use(['form', 'jquery', 'layer', 'element', 'laydate'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element,
            laydate = layui.laydate;

        laydate.render({
            elem: '#birthday', //指定元素
        });

        //提交
        form.on('submit(Add-filter)', function (data) {
            var field = data.field;
            //数据校验
            if (true) {
                var nameReg = /^[\u4e00-\u9fa5]{2,4}$/;
                var phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                var telReg = /^(0\d{2,3})-?(\d{7,8})$/;
                var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                var qqReg = /^[1-9][0-9]\d{4,9}$/;
                var postCodeReg = /^[1-9]\d{5}$/;
                var cardIdReg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                if (field.name.trim() == "") {
                    layer.msg("姓名不能为空", {icon: 2});
                    return false;
                }else if(!nameReg.test(field.name.trim())){
                    layer.msg("姓名只能输入2-4个中文", {icon: 2});
                    return false;
                }
                if (field.sex.trim() == "") {
                    layer.msg("性别不能为空", {icon: 2});
                    return false;
                }
                if (field.deptId.trim() == "") {
                    layer.msg("部门不能为空", {icon: 2});
                    return false;
                }
                if (field.jobId.trim() == "") {
                    layer.msg("职位不能为空", {icon: 2});
                    return false;
                }
                if (field.phone.trim() == "") {
                    layer.msg("手机号码不能为空", {icon: 2});
                    return false;
                }else if(!phoneReg.test(field.phone.trim())){
                    layer.msg("手机号码不合法，请重新输入", {icon: 2});
                    return false;
                }
                if (field.tel.trim() == "") {
                    layer.msg("电话号码不能为空", {icon: 2});
                    return false;
                }else if(!telReg.test(field.tel.trim())){
                    layer.msg("电话号码不合法，请重新输入", {icon: 2});
                    return false;
                }
                if (field.email.trim() == "") {
                    layer.msg("邮箱不能为空", {icon: 2});
                    return false;
                }else if(!emailReg.test(field.email.trim())){
                    layer.msg("邮箱不合法，请重新输入", {icon: 2});
                    return false;
                }
                if (field.qq.trim() == "") {
                    layer.msg("QQ不能为空", {icon: 2});
                    return false;
                }else if(!qqReg.test(field.qq.trim())){
                    layer.msg("QQ账号不合法，请重新输入", {icon: 2});
                    return false;
                }
                if (field.education.trim() == "") {
                    layer.msg("学历不能为空", {icon: 2});
                    return false;
                }
                if (field.speciality.trim() == "") {
                    layer.msg("专业不能为空", {icon: 2});
                    return false;
                }
                if (field.cardId.trim() == "") {
                    layer.msg("身份证号码不能为空", {icon: 2});
                    return false;
                }else if(!cardIdReg.test(field.cardId.trim())){
                    layer.msg("身份证号码不合法，请重新输入", {icon: 2});
                    return false;
                }
                if (field.party.trim() == "") {
                    layer.msg("政治面貌不能为空", {icon: 2});
                    return false;
                }
                if (field.race.trim() == "") {
                    layer.msg("民族不能为空", {icon: 2});
                    return false;
                }
                if (field.address.trim() == "") {
                    layer.msg("联系地址不能为空", {icon: 2});
                    return false;
                }
                if (field.birthday.trim() == "") {
                    layer.msg("生日不能为空", {icon: 2});
                    return false;
                }
                if (field.hobby.trim() == "") {
                    layer.msg("爱好不能为空", {icon: 2});
                    return false;
                }
                if (field.postCode.trim() == "") {
                    layer.msg("邮政编码不能为空", {icon: 2});
                    return false;
                }else if(!postCodeReg.test(field.postCode.trim())){
                    layer.msg("邮政编码不合法，请重新输入", {icon: 2});
                    return false;
                }
            }
            //发送请求
            $.ajax({
                type: 'post',
                async: false,
                url: '${pageContext.request.contextPath}/employee/addEmp',
                contentType: "application/json",
                data: JSON.stringify(data.field),
                dataType: 'json',
                success: function (rs) {
                    console.log(rs);
                    if (rs == '2') {
                        layer.msg("员工添加成功！", {icon: 1});
                        $('#reset').trigger('click');
                    } else {
                        layer.msg(rs, {icon: 2});
                    }

                },
                error: function (e) {
                    layer.msg(e.responseText, {icon: 2});
                }
            });
            return false;
        });

    });
</script>
</html>
